<template>
  <div class="shopping">
    <div class="top">
      <h4 v-for="(item, index) in qiang" :key="index" @click="qiehuan(index)">
        {{ item }}
      </h4>
    </div>

    <div
      class="shpp"
      v-for="item in rende"
      :key="item.id"
      v-show="xiabiao == 0"
    >
      <img :src="item.pic" alt="" />

      <div class="wen">
        <span style="font-size: 15px; color: gray">{{ item.title }}</span>
        <div class="two" style="margin-top: 10px">
          <span style="font-weight: 600">{{ item.p1 }}</span>
          <p style="font-weight: 600">{{ item.p2 }}</p>
        </div>
        <div style="margin-top: 10px; font-size: 14px; color: red">
          {{ item.tuanjia }}
        </div>
        <div style="margin-top: 12px">
          ￥<span style="color: red; font-size: 25px">{{ item.jinqian }}</span>
        </div>
        <button>{{ item.mashangqiang }}</button>
        <div class="yishou" style="font-size: 13px">
          已售{{ item.yishou }} 份
        </div>
      </div>
    </div>

    <div
      class="shpp"
      v-for="item in rendetwo"
      :key="item.id"
      v-show="xiabiao == 1"
    >
      <img :src="item.pic" alt="" />

      <div class="wen">
        <span style="font-size: 15px; color: gray">{{ item.title }}</span>
        <div class="two" style="margin-top: 10px">
          <span style="font-weight: 600">{{ item.p1 }}</span>
          <p style="font-weight: 600">{{ item.p2 }}</p>
        </div>
        <div style="margin-top: 10px; font-size: 14px; color: red">
          {{ item.tuanjia }}
        </div>
        <div style="margin-top: 12px">
          ￥<span style="color: red; font-size: 25px">{{ item.jinqian }}</span>
        </div>
        <button>{{ item.mashangqiang }}</button>
        <div class="yishou" style="font-size: 13px">
          已售{{ item.yishou }} 份
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "MyShopping",
  data() {
    return {
      xiabiao: 0,
      qiang: ["正在抢购", "上新预告"],
      rende: [
        {
          id: "1",
          pic: "https://pic4.zhimg.com/v2-c04599f05e5f30e6fc69b3b7a66a10d7_1200x500.jpg",
          title: "汉堡王 | 北美新天地餐厅",
          p1: "买一送一 | 用心火烤",
          p2: "肉质紧实 鲜嫩多汁",
          tuanjia: "爆爆团价",
          jinqian: 25,
          mashangqiang: "马上抢",
          yishou: 9029,
        },
        {
          id: "2",
          pic: "https://tse2-mm.cn.bing.net/th/id/OIP-C.OHBVWEd0zevQz8xR3fjdWQHaE8?pid=ImgDet&rs=1",
          title: "华莱士-全鸡汉堡 | 长治路店",
          p1: "华莱士 | 聚划算单人套餐 | 进",
          p2: "店必选",
          tuanjia: "爆爆团价",
          jinqian: 12.12,
          mashangqiang: "马上抢",
          yishou: 173,
        },
        {
          id: "3",
          pic: "https://ts1.cn.mm.bing.net/th/id/R-C.a2a854c972bde9ba0ffa10081feff960?rik=OUyr3L2vnf0WvA&riu=http%3a%2f%2ft00img.yangkeduo.com%2fgoods%2fimages%2f2018-12-18%2f052a5cb266c06b1cd6828b0fa2e14bc8.jpeg%3fimageMogr2%2fquality%2f70&ehk=2BKzMitNhYRW7nKz8jWyFqV1Sdq0d7SzMu%2fWyFTWjGo%3d&risl=&pid=ImgRaw&r=0",
          title: "弓天下山西特产 | 高新店",
          p1: "白老大小米果仁酥220g 【爆",
          p2: "爆团】",
          tuanjia: "爆爆团价",
          jinqian: 66.66,
          mashangqiang: "马上抢",
          yishou: 56,
        },
      ],
      rendetwo: [
        {
          id: "6",
          pic: "https://ts1.cn.mm.bing.net/th/id/R-C.a1b5767923f68e280d33a2bb01c26c29?rik=1lMXQHGfLYW8QA&riu=http%3a%2f%2fpic11.nipic.com%2f20101119%2f2531170_174932152000_2.jpg&ehk=3pFBeOG%2fYv23B9ljc1N2erXx2jCRWRwonmR5xtjtSIg%3d&risl=&pid=ImgRaw&r=0",
          title: "汉堡王 | 北美新天地餐厅",
          p1: "买一送一 | 用心火烤",
          p2: "肉质紧实 鲜嫩多汁",
          tuanjia: "爆爆团价",
          jinqian: 25,
          mashangqiang: "马上抢",
          yishou: 9029,
        },
        {
          id: "4",
          pic: "https://gw.alicdn.com/imgextra/i4/909800419/O1CN011ExwQAqjVLXtpuN_!!909800419-0-daren.jpg_790x10000Q75.jpg",
          title: "弓天下山西特产 | 高新店",
          p1: "白老大小米果仁酥220g 【爆",
          p2: "爆团】",
          tuanjia: "爆爆团价",
          jinqian: 66.66,
          mashangqiang: "马上抢",
          yishou: 56,
        },
        {
          id: "5",
          pic: "https://ts1.cn.mm.bing.net/th/id/R-C.8084156b0098e6c998b03f67aae4c96d?rik=nXp8K2z8Mur%2bOA&riu=http%3a%2f%2fpic104.huitu.com%2fres%2f20180328%2f920737_20180328160021179080_1.jpg&ehk=t0wYvMDMzRzv2OM9D%2b%2fb552iFiatF102UOS2cfGrb%2b4%3d&risl=&pid=ImgRaw&r=0",
          title: "华莱士-全鸡汉堡 | 长治路店",
          p1: "华莱士 | 聚划算单人套餐 | 进",
          p2: "店必选",
          tuanjia: "爆爆团价",
          jinqian: 12.12,
          mashangqiang: "马上抢",
          yishou: 173,
        },
      ],
    };
  },
  methods: {
    qiehuan(index) {
      if (index == 0) {
        this.xiabiao = 0;
      } else {
        this.xiabiao = 1;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.top {
  widows: 100%;
  height: 30px;
  background-color: aqua;
  display: flex;
  align-items: center;
}
.top h4 {
  padding-right: 30px;
  color: orchid;
}
.shpp {
  width: 100%;
  height: 170px;
  background-color: aqua;
  margin: 14px 0;
  display: flex;
  position: relative;
}
.shpp img {
  width: 40%;
  height: 170px;
  background-color: red;
  margin-right: 20px;
}
button {
  width: 80px;
  height: 30px;
  background-color: rgba(255, 0, 0, 0.711);
  border-radius: 10px;
  color: #fff;
  font-size: 12px;
  position: absolute;
  bottom: 35px;
  right: 0;
}
.yishou {
  bottom: 15px;
  position: absolute;
  right: 0;
  font-size: 12px;
  color: red;
}
</style>